<template>
	<div class="mainDiv" style="padding:10px;box-sizing: border-box;color:#000">
		<h4>请选择产品类型</h4>
		<el-collapse accordion style="height:100%">
			<el-collapse-item v-for="main in mainbranch" :key="main.children">
				<template slot="title">{{main.name}}</template>
				<el-table :data="main.children" @row-click="mouseclick" @row-dblclick="mousedblclick" :row-key="getrowkeys" :expand-row-keys="selectbranch">
					<el-table-column prop="id" label="分类ID"></el-table-column>
					<el-table-column prop="name" label="分类名称"></el-table-column>
					<el-table-column prop="addtime" label="添加时间">
						<template slot-scope="scope">
							{{time(scope.row.addtime)}}
						</template>
					</el-table-column>
					<el-table-column label="选择">
						<template slot-scope="scope">
							<el-switch v-model="scope.row.isdisable" on-text="是" off-text="否">
							</el-switch>
						</template>
					</el-table-column>
				</el-table>
			</el-collapse-item>
		</el-collapse>
		<el-row style="margin-top:10px !important;text-align: right;">
			<el-button size="mini" icon="close" type="danger" @click="close" style="margin-left:10px;">取消关闭</el-button>
			<el-button size="mini" icon="upload2" type="success" @click="submit">确定选择</el-button>
		</el-row>
	</div>
</template>
<script>
import C from '@/common/common.js'
export default {
  name: 'selectcategory',
  data () {
    return {
      mainbranch: [],
      subbranch: [],
      selectbranch: []
    }
  },
  mounted () {
    this.getbranch()
  },
  methods: {
    getrowkeys: function (row) {
      return row.id
    },
    mouseclick: function (row, event) {
      event.preventDefault()
      this.subbranch.forEach((col) => {
        col.isdisable = false
      })
      row.isdisable = true
      this.selectbranch.push(row)
    },
    mousedblclick: function (row, event) {
      event.preventDefault()
      C.closeBrowserWindow(row)
    },
    getbranch: async function () {
      var that = this
      let data = await C.ajax('/organization/popup/categorylist', this.page, 'post')
      if (data) {
        that.mainbranch = data.p
        that.subbranch = data.c
        for (var i = 0; i < that.mainbranch.length; i++) {
          that.mainbranch[i].children = []
          for (var j = 0; j < that.subbranch.length; j++) {
            if (that.subbranch[j].pid === that.mainbranch[i].id) {
              that.mainbranch[i].children.push(that.subbranch[j])
            }
          }
        }
      }
    },
    time: function (unix) {
      let tm = new Date(unix * 1000)
      let yy = tm.getFullYear()
      let mm = tm.getMonth() < 9 ? '0' + (tm.getMonth() + 1) : tm.getMonth() + 1
      let dd = tm.getDate() < 10 ? '0' + tm.getDate() : tm.getDate()
      return yy + '-' + mm + '-' + dd
    },
    close: function () {
      C.closewin()
    },
    submit: function (row) {
      var aaa = {}
      this.subbranch.forEach((res) => {
        if (res.isdisable === true) {
          aaa = res
        }
      })
      if (aaa.id) {
        C.closeBrowserWindow(aaa)
      } else {
        C.error('请选择分类')
        return false
      }
    }
  }
}
</script>
<style>
h4 {
  margin: 0 0 10px !important;
}
.el-collapse {
  height: 630px;
  overflow: auto;
}

.el-collapse-item__arrow {
    margin-right: 18px;
}
</style>